<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- <script type="module" src="./proxy-storage.js">

  </script> -->
  <script>
    class Storage {
      static _namepace = 'lk-'
      // 获取storage属性
      static get(key) {
        return JSON.parse(
          sessionStorage.getItem(key)
        )
      }
      // 设置storage属性
      static set(key, val) {
        sessionStorage.setItem(key, typeof val === 'object' ? JSON.stringify(val) : val)
      }

      constructor(options) {
        console.log(options);
        const that = Storage
        const { nameSpace = that._nameSpace, memory } = options;
        const getKey = (key) => nameSpace + key

        const _storage = memory

        Object.keys(memory).forEach(key => {
          that.set(getKey(key), memory[key])

          Reflect.defineProperty(_storage, key, {
            get: () => that.get(getKey(key)),
            set: (val) => that.set(getKey(key), val),
            configurable: true
          })
        })

        Reflect.defineProperty(window, '$storage', {
          get: () => _storage
        })
      }
    }
    new Storage({
      memory: {
        a: 1, likun: { name: 'likun', age: 23 }
      },
      nameSpace: 'likun-'
    })

    $storage.a = 234
    $storage.likun.school = 'sdu'
    $storage.likun = {...$storage.likun}
    console.log($storage);
  </script>
</body>

</html>